<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>p2_元素的放大与过度</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: #f00;
                margin: 100px auto 0;/*上100 左右auto 下0*/
                /*过度时间要加在元素本身上，不能加在悬停上
                不然离开的时候没有过度！*/
                transition: 2s;

            }
            /*与关系： 选中后 悬停*/
            div:hover {
                background-color: #0aa1ed;
                /*变换：缩放 scale（n）
                n>1放大n倍 n=1 大小不变 0<n<1缩小n倍 0缩小到看不见*/
                transform: scale(2);
                /*transform: rotate(45deg);!*旋转 角度*!*/
                /*transform: scale(2)rotate(45deg);!*变大旋转*!*/
                border-radius: 50px;/*倒角*/
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>